import React, { Component } from 'react'

// 定义事件的4中方式
// 1.在 render 的函数内部直接使用箭头函数,箭头函数的默认参数为event
// 2.在组件内使用箭头函数定义一个方法, 箭头函数的默认参数为event
//   为什么要定义为箭头函数，还是因为this指向的问题
//   DOM元素绑定时间时，this指向的DOM元素
// 3.组件内部定义非箭头函数，render事件内改变 事件的 this指向 this.add.bind(this)
export default class App extends Component {
  state = {
    count: 10
  }
  add = function (event) {
    console.log(event)
    this.setState((prevState) => ({ count: prevState.count + 1 }))
  }
  render() {
    return (
      <div>
        <button onClick = { this.add.bind(this) }>加1</button>
      </div>
    )
  }
}
